<template>
  <div>
    <!-- 蒙版 -->
    <transition name="fade">
      <div
        v-if="isVisibale"
        @click="close"
        class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
      ></div>
    </transition>
    <!-- 内容 -->
    <transition name="up">
      <div
        v-if="isVisibale"
        class="max-w-[80%] max-h-[80%] overflow-auto fixed top-[10%] left-[50%] translate-x-[-50%] z-50 px-2 py-1.5 rounded-sm border dark:border-zinc-600 cursor-pointer bg-white dark:bg-zinc-800 xl:min-w-[35%]"
      >
        <!-- 标题 -->
        <div
          class="text-lg font-bold text-zinc-900 dark:text-zinc-200 mb-2"
          v-if="props.title"
        >
          {{ props.title }}
        </div>
        <!-- 内容 -->
        <div class="text-base text-zinc-900 dark:text-zinc-200 mb-2">
          <slot />
        </div>
        <!-- 按钮 -->
        <div
          class="flex justify-end"
          v-if="props.cancelEvent || props.confirmEvent"
        >
          <m-button type="info" class="mr-2" @click="onCancelClick">
            {{ props.cancelText }}
          </m-button>
          <m-button type="primary" @click="onConfirmClick">
            {{ props.confirmText }}
          </m-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useVModel } from '@vueuse/core'
const emits = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: {
    type: Boolean,
    require: true
  },
  title: {
    type: String
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelEvent: {
    type: Function
  },
  confirmEvent: {
    type: Function
  },
  close: {
    type: Function
  }
})

const isVisibale = useVModel(props)

const handleClose = () => {
  isVisibale.value = fasle
  if (props.close) {
    props.close()
  }
}

const onCancelClick = () => {
  if (props.cancelEvent) {
    props.cancelEvent()
  }
  handleClose()
}
const onConfirmClick = () => {
  if (props.confirmEvent) {
    props.confirmEvent()
  }
  handleClose()
}
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.up-enter-active,
.up-leave-active {
  transition: all 0.3s;
}

.up-enter-from,
.up-leave-to {
  opacity: 0;
  transform: translate3d(-50%, 100px, 0);
}
</style>
